import React from 'react';
import { MapContainer, TileLayer, Marker, Popup, WMSTileLayer, useMap } from 'react-leaflet';
import L from 'leaflet'
import "leaflet/dist/leaflet.css";
import 'leaflet-draw'

let drawLayerGrounp = null;

const MyComponent = () => {
    const map = useMap()
    console.log('map center:', map.getCenter())
    console.log('map:', map)
    let y = 20
    let x = 107
    let z = 15


    // let nexrad = L.tileLayer.wms("geoserver/hlz/wms?", {
    //     layers: 'hlz:南宁市各区县',
    //     format: 'image/png',
    // });

    // nexrad.addTo(map)

    // setInterval(() => {
    //     y++
    //     x++
    //     const a = map.flyTo([y,x], z)
    //     console.log(a.getZoom())
    // }, 6000)


    map.on(L.Draw.Event.CREATED, (e) => {
        console.log(e)
    }) ;

    return null
}

const Map = () => {

    const center = [22.818197293240235, 108.28545570373537]
    const position = [22.818197293240235, 108.28545570373537]

    const mapOptions = {
        center: center,
        zoom: 13,
        maxZoom: 18,
        minZoom: 5,
    };

    return (
        <MapContainer {...mapOptions} style={{ height: '100%' }}>
            {/* <TileLayer url="http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}" /> */}
            {/* <TileLayer url="https://t5.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=68e092a8b3dd67d8b14a216fc5380225" /> */}
            <TileLayer url="http://192.168.3.200:9009/bigemap.16bt1u3i/tiles/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiY3VzXzVxYTNvbWVlIiwiYSI6IjhzbWJiYXhsamlkODlwdDd2OGRoZWJoMmkiLCJ0Ijo0fQ.5nA3CfJX9OcW5L9oxFWH2rkPCWerUntxf_I1kbdb0Ok" />

            <Marker position={position}>
                <Popup>
                    A pretty CSS3 popup. <br /> Easily customizable.
                </Popup>
            </Marker>
            <MyComponent />
        </MapContainer>
    );
};

export default Map;